<template>
  <div class="Directorys">
    <el-card class="box-card">
      <div >
      <el-breadcrumb separator-class="el-icon-arrow-right"  slot="header" v-if="subject.id && subject.name">
    <el-breadcrumb-item>学科管理</el-breadcrumb-item>
    <el-breadcrumb-item>{{subject.name}}</el-breadcrumb-item>
    <el-breadcrumb-item>目录管理</el-breadcrumb-item>
  </el-breadcrumb>
</div>
        <el-row>
          <el-col :span='18'><el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="目录名称">
            <el-input v-model="formInline.directoryName"></el-input>
          </el-form-item>
          <el-form-item label="状态" prop="state">
            <el-select v-model="formInline.state">
              <el-option label="启用" value="1"></el-option>
              <el-option label="禁用" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button size="small" @click="del">清除</el-button>
            <el-button type="primary" @click="gitList" size="small"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>
        </el-col>
          <el-col :span='6'  style="text-align:right">
          <el-button type="text" icon="el-icon-back"  @click="$router.back()"  v-if="subject.id && subject.name" >返回学科</el-button>
          <el-button
            type="success"
            size="small"
            icon="el-icon-edit"
            @click="Adddirectorys"
            >新增目录</el-button
          >
       </el-col>
         </el-row>
      <!-- 消息提示 -->
      <el-alert
        class="news"
        :title="`数据共有${total}`"
        type="info"
        :closable="false"
        show-icon
      >
      </el-alert>
      <!-- 消息提示 -->
      <!-- 表格 -->
      <el-table :data="directorys" style="width: 100%">
        <el-table-column label="序号" type="index"> </el-table-column>
        <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
        <el-table-column prop="directoryName" label="目录名称">
        </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <template slot-scope="scope">{{
            scope.row.addDate | filterTime
          }}</template>
        </el-table-column>
        <el-table-column prop="totals" label="面试数量"> </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="scope">{{
            scope.row.state === 1 ? "开启" : "禁用"
          }}</template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="directorysState(scope.row)">{{
              scope.row.state === 1 ? "禁用" : "启用"
            }}</el-button>
            <el-button
              type="text"
              :disabled="scope.row.state === 1"
              @click="Revisedirectorys(scope.row)"
              >修改</el-button
            >
            <el-button
              type="text"
              :disabled="scope.row.state === 1 || scope.row.total > 0"
              @click="directorysDel(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formInline.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="formInline.pagesize"
        layout=" sizes, prev, pager, next, jumper"
        :total="total"
        style="margin-top: 20px; text-align: right"
      >
      </el-pagination>
    </el-card>
      <!-- <el-dialog
    
      title="增加目录"
      :visible.sync="dialogVisible"
      width="400px"
      @close="rubs"
    >
      <el-form
        :model="ruleForm"
        :rules="checkForm"
        ref="ruleFormRef"
        class="demo-ruleForm"
        label-width="100px"
      >
        <el-form-item label="目录名称" prop="directoryName">
          <el-input
            v-model="ruleForm.directoryName"
            placeholder="请输入目录名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="Reset">取 消</el-button>
        <el-button type="primary" @click="rub">确 定</el-button>
      </span>
    </el-dialog> -->
    
    <el-dialog
    
      :title="`${this.directoryId ? '修改' : '增加'}目录`"
      :visible.sync="dialogVisible"
      width="400px"
      @close="Reset"
    >
      <el-form
        :model="ruleForm"
        :rules="checkForm"
        ref="ruleFormRef"
        class="demo-ruleForm"
        label-width="100px"
      >
        <el-form-item label="所属学科" prop="subjectID"  v-if="!$route.query.id" >
          <el-select v-model="ruleForm.subjectID">
            <el-option
              v-for="item in sublist"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName">
          <el-input
            v-model="ruleForm.directoryName"
            placeholder="请输入目录名称"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="Reset">取 消</el-button>
        <el-button type="primary" @click="rub">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { list, changeState, remove, update, add } from "@/api/hmmm/directorys";
import { simple as sublist } from "../../api/hmmm/subjects";
export default {
  data() {
    return {
      modelForm: {
        directoryName: "",
        state: "",
      },
   
      ruleForm: {
        subjectID:+this.$route.query.id || null,
        directoryName: null,
        
      },
      checkForm: {
        subjectID: [],
        directoryName: [
          { required: true, message: "请输入目录名称", tirgger: "blur" },
        ],
      },
      directorys: [],
      subjectID: "",
      sublist: [],
      formInline: {
        page: 1,
        pagesize: 10,
        state: null,
        directoryName: null,
      },
      total: 0,
      dialogVisible: false,
      directoryId: "",
    };
  },
  async created() {
    this.gitList();
    const { data } = await sublist();
    this.sublist = data;
  },
   computed: {
    subject () {
      return this.$route.query || {}
    }
  },
   watch: {
    '$route.query': function () {
      this.getList()
    }
  },
  methods: {
    async gitList() {
        this.formInline.subjectID = this.subject.id || null
      const { data } = await list(this.formInline);
      this.directorys = data.items;
  
      this.total = data.counts;
    },
    // 页面
    handleSizeChange(newPagesize) {
      this.formInline.pagesize = newPagesize;
      this.gitList();
    },
    handleCurrentChange(newPage) {
      this.formInline.page = newPage;
      this.gitList();
    },
    del() {
      this.formInline = {};
    },
    async Adddirectorys() {
      this.dialogVisible = true;
    },
    // 状态修改
    async directorysState(directory) {
      await changeState({
        id: directory.id,
        state: directory.state === 1 ? 0 : 1,
      });
      this.$message.success("操作成功");
      directory.state = directory.state === 1 ? 0 : 1;
    },
    // 删除
    async directorysDel(directory) {
      await this.$confirm("此操作将永久删除该目录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
      await remove(directory);
      this.$message.success("删除成功");
      this.gitList();
    },

    Reset() {
      this.$refs.ruleFormRef.resetFields();
      this.dialogVisible = false;
      this.directoryId = "";
    },

    async Revisedirectorys(scope) {
      console.log(scope);
      this.directoryId = scope.id;
      this.ruleForm.directoryName = scope.directoryName;
      this.ruleForm.subjectID = scope.subjectID;
      this.dialogVisible = true;
    },

    async rub() {
      //  增加
      this.$refs.ruleFormRef.validate(async (valid) => {
        if (valid) {
          if (!this.directoryId) {
            try {
              await add(this.ruleForm);
              this.gitList();
              console.log(this.ruleForm.subjectID);
              this.dialogVisible = false;
            } catch (err) {
              this.$message.error("增加失败");
              console.log(err);
            }
          } else {
            // 修改
            var params = {
              id: this.directoryId,
              subjectID: this.ruleForm.subjectID,
              directoryName: this.ruleForm.directoryName,
            };

            try {
              await update(params);
              this.gitList();
              this.dialogVisible = false;
            } catch (err) {
              this.$message.error("修改失败");
            }
          }
        }
      });
    },
    
  },
  filters: {
    filterTime(val) {
      const date = new Date(val);
      const yyyy = date.getFullYear();
      const m = (date.getMonth() + 1 + "").padStart(2, 0);
      const d = (date.getDate() + "").padStart(2, 0);
      const hh = (date.getHours() + "").padStart(2, 0);
      const mm = (date.getMinutes() + "").padStart(2, 0);
      const ss = (date.getSeconds() + "").padStart(2, 0);

      let result = `${yyyy}-${m}-${d} ${hh}:${mm}:${ss}`;

      return result;
    },
  },
};
</script>

<style lang="less" scoped>
.Directorys {
  padding: 10px;
  .news {
    margin-bottom: 15px;
  }
}
/deep/ .el-select {
  width: 100%;
}
.el-breadcrumb{
  margin-bottom: 20px;
}
</style>

  